<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
	<meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
	<meta name="author" content="hencework"/>

	<!-- Custom CSS -->
	<link href="dist/css/style.css" rel="stylesheet" type="text/css">
	<script src="dist/js/echarts.min.js"></script>
</head>
<body>
<!--/Preloader-->
<div class="wrapper  theme-1-active pimary-color-blue">
	<!-- Main Content -->
	<div class="row">
		<div class="col-lg-6">
			<div class="panel panel-default card-view">
				<div class="panel-heading">
					<div class="pull-left">
						<h6 class="panel-title txt-dark">应聘者学历统计</h6>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="panel-wrapper collapse in">
					<div class="panel-body" >
						<!--图表区域-->
						<div id="main1" style="height: 700px"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-6">
			<div class="panel panel-default card-view">
				<div class="panel-heading">
					<div class="pull-left">
						<h6 class="panel-title txt-dark">应聘者学历占比</h6>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="panel-wrapper collapse in">
					<div class="panel-body">
						<!--图表区域-->
						<div id="main2" style="height: 700px"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- ChartJS JavaScript -->
<script src="vendors/chart.js/Chart.min.js"></script>
<script src="dist/js/chartjs-data.js"></script>
<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>
<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>
<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

<script>
	//1.创建2个echarts对象
	var myChart1 = echarts.init(document.getElementById("main1"));
	var myChart2 = echarts.init(document.getElementById("main2"));

	//2.发送ajax请求
	$.post("/visualization/edu/eduCount.do",function(data){
		//3.回调函数中,设置两个echarts option
		myChart1.setOption({
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true //grid 区域是否包含坐标轴的刻度标签
			},
			xAxis: [
				{
					type: 'category',
					data: data.data.names,
					axisTick: {   //配置坐标轴刻度
						alignWithLabel: true  //true 有效,保证刻度线和标签对齐
					}
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					name: '岗位人数',
					type: 'bar',  //柱状图
					label: {     //图上添加文字
						show: true,
						position: 'inside'
					},
					barWidth: '60%',
					data: data.data.countNum
				}
			]
		});

		myChart2.setOption({
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: data.data.names
			},
			series: [
				{
					name: '学历占比',
					type: 'pie',
					radius: '55%',  //代表饼图的半径
					center: ['50%', '60%'],  //饼图圆心的坐标
					data: data.data.eduData,
					emphasis: {   //高亮扇区和标签的样式
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		});
	},"json")




</script>
</body>
</html>
